<template>
    <div>
      <div class="bg-white grid-content">
        <el-form :inline="true" :model="xcwxjyjlForm" class="demo-form-inline">

          <el-form-item label="年份:">
            <el-date-picker
              v-model="currentYear"
              type="year"
              value-format="yyyy"
              placeholder="选择年">
            </el-date-picker>
          </el-form-item>

          <!-- <el-form-item label="日期:">
            <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="formSearch()">查询</el-button>
            <!-- <el-button type="success" @click="download()">下载</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle">{{currentYear}}年计划与实耗天然气量统计表</div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData.gqlist" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border show-summary height="500">
          <!-- <el-table-column type="index" label="序号" :index="indexMethod">
          </el-table-column> -->
          <el-table-column align="center" prop="month" label="月份">
          </el-table-column>
          <el-table-column align="center" label="第一作业区">
            <el-table-column align="center" prop="onePlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="oneReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="oneDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="第二作业区">
            <el-table-column align="center" prop="twoPlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="twoReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="twoDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="第三作业区">
            <el-table-column align="center" prop="threePlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="threeReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="threeDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="第四作业区">
            <el-table-column align="center" prop="fourPlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="fourReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="fourDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="肇州分公司">
            <el-table-column align="center" prop="zzPlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="zzReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="zzDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="保障分公司">
            <el-table-column align="center" prop="bzPlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="bzReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="bzDiff" label="差值">
            </el-table-column>
          </el-table-column>
          <el-table-column align="center" label="合计">
            <el-table-column align="center" prop="monthTotalPlan" label="计划">
            </el-table-column>
            <el-table-column align="center" prop="monthTotalReal" label="实际">
            </el-table-column>
            <el-table-column align="center" prop="monthTotalDiff" label="差值">
            </el-table-column>
          </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <!-- <el-pagination align='right'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination> -->

      </div>
    </div>
</template>

  <script>
  import moment from "moment";
  import jnbbApi from '@/api/bbsc/jnbb';

  export default {
    data() {
      return {
        show:false,//隐藏序列
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        currentPage: 1,//当前页码
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        currentYear:moment().format("YYYY"),
        //  表头数据
        tableHead: [
          { val: "指标11111", item: "target1" },
          { val: "指标2", item: "target2" },
          { val: "指标3", item: "target3" },
          { val: "指标4", item: "target4" },
          { val: "指标5", item: "target5" },
        ],
        // 表格数据
        tableData: [],
        //excel数据
        excelData:[],
        approveStatus:'',
        xcwxjyjlForm:{},
        // // table数据总条数
        // tableTotal: 30,
        // // 分页数
        // currentSize: 10,
        // //当前页
        // currentPage: 4
      };
    },
    mounted(){
        this.search();
    },
    methods: {
        /**
        * 查询列表
        */
        async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
            let res = await jnbbApi.getGqlybList({approveStatus:this.approveStatus,currentYear:this.currentYear});
            //判断是否成功
            if(res.success){
                console.log(res.data);
                //赋值
                this.tableData = res.data;

            }
        },
        //条件查询
        formSearch(){
            // console.log(this.searchDate);
            this.search();
        },
        download() {
          require.ensure([], async () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
            //简单表格书写
            //添加表格id
            var myindex = [];
            for (var i = 0; i < this.total; i++) {
              myindex[i] = i + 1
            }
            var newindex = myindex.map(item => {
              console.log(item)
              return {
                index: item
              }
            })
            console.log('123321', myindex)
            console.log('newindex', newindex)
            let res = await xcwxApi.getXcwxList({pageNo:1,pageSize:this.total,approveStatus:'',startDate:this.searchDate[0],endDate:this.searchDate[1]});
            if(res.success){
              this.excelData =  res.data.records;
            }
            //将添加的序号加入到表格中形成新的mergeArr表格
            let mergeArr = [newindex, this.excelData].reduce((prev, curr) => {
              return prev.map((item, index) => {
                return Object.assign(item, curr[index]);
              });
            });
            console.log('mergeArr', mergeArr);
            console.log('excelData', this.excelData);
            const tHeader = ['序号', '设备名称', '维修时间', '维修、校验项目', '备注', '作业区维修上报人', '岗位人员', '承揽单位','维修人员'];
            const filterVal = ['index', 'sbmc', 'wxsj', 'wxjyxm', 'bz', 'zyqwxsbr', 'gwry', 'cldw','wxry'];

            console.log(this.excelData);
            const list = mergeArr;
            console.log(list);
            const data = this.formatJson(filterVal, list);
            console.log(data);

            export_json_to_excel({
              header: tHeader,
              data: data,
              filename: '现场维修、校验记录',
              autoWidth: true,
              bookType: 'xlsx'
            }),
              this.$message.success('导出报表成功！')

          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData?.map(v => {
            return filterVal?.map(j => v[j])
          })
        },
        /*** 当每页数量发生变化时触发该事件 */
        handleSizeChange(size) {
            console.log(size);
            this.pageSize = size;
            //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /*** 当页码发生变化时触发该事件 */
        handleCurrentChange(page) {
            console.log(page);
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        // 序号计算
        indexMethod (index) {
            // index默认在0开始，这里+1
            return index + 1 + (this.pageNo - 1) * this.pageSize
        },
    },

  };
  </script>


  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: larger;
    padding-left: 45%;
    margin-bottom: 16px;
    float: left;
  }

  //按钮组
  .myTime {
    float: right;
  }

  //格子的样式
  .bg-white {
    background: #ffffff;
  }

  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .calendar ::v-deep .el-button-group::before {
    display: none;
  }

  .calendar ::v-deep .el-button-group::after {
    display: none;
  }

  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }

  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  </style>
